import { ref, watchEffect, unref, computed } from 'vue'

// import { Icon } from '@/components/Icon'
import { useLocale } from '@/locales/useLocale'
import { localeList } from '@/settings/localeSetting'
import type { LocaleType } from '#/config'
export default function useHeaderLocale() {
  const selectedKeys = ref<string[]>([])

  const { changeLocale, getLocale } = useLocale()

  const localeText = computed(() => {
    const key = selectedKeys.value[0]
    if (!key) {
      return ''
    }
    return localeList.find((item) => item.event !== key)?.text
  })

  watchEffect(() => {
    selectedKeys.value = [unref(getLocale)]
  })

  async function toggleLocale(lang: LocaleType) {
    await changeLocale(lang as LocaleType)
    selectedKeys.value = [lang as string]
    // props.reload && location.reload()
  }

  function onChange() {
    toggleLocale(getLocale.value === 'en' ? 'zh_CN' : 'en')
  }

  return {
    localeText,
    onChange,
  }
}
